<template>
  <div style="width: 100%;padding: 0 20px;">
    <!--搜索框-->
    <div style="float: right; margin-bottom: 20px; margin-top: 20px;margin-right: 50px;">
      <el-input placeholder="班级ID搜索" style="width: 300px;" v-model="classid"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="search()" @keyup = "search()">搜索</el-button>
    </div>
    <!--不使用搜索框的时候-->
    <el-table v-if="!classid" :data="pagination" border style="width: 99.7%;" height="550px" @row-click="toStudent">
      <el-table-column prop="classroomId" label="班级ID" fixed width="200px">
      </el-table-column>
      <el-table-column prop="count" label="班级人数" width="200px">
      </el-table-column>
      <el-table-column prop="describe" label="描述" width="300px">
      </el-table-column>
      <el-table-column label="操作" width="auto" prop="classroomId">
        <el-button>查看详情</el-button>

      </el-table-column>
    </el-table>
    <!--使用搜索框---->
    <el-table v-else :data="searchlist" border style="width: 99.7%;" height="550px" @row-click="toStudent">
      <el-table-column prop="classroomId" label="班级ID" fixed width="200px">
      </el-table-column>
      <el-table-column prop="count" label="班级人数" width="200px">
      </el-table-column>
      <el-table-column prop="describe" label="描述" width="300px">
      </el-table-column>
      <el-table-column label="操作" width="auto" prop="classroomId">
        <el-button>查看详情</el-button>
      </el-table-column>
    </el-table>
    <!--页面跳转,分页器-->
    <div class="block"
      style="display: flex;
      justify-content: flex-end;
      align-items:center;
      bottom: 20px; right: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="totalItems">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      // 搜索框的值
      classid: '',
      activeIndex: '1',
      activeIndex2: '1',
      // 中间量
      classlist: [],
      // 表格渲染的值
      list: [],
      // 中间变量
      templist: [],
      // 搜索时表格渲染的数组
      searchlist: [],
      // 分页列表
      pagination: [],
      currentPage: 1,
      // 分页的分界线
      start: 0,
      end: 10,
      pageSize: 6, // 每页显示的条目数量
      totalItems: 50, // 数据库中条目数量
      pageSizes: [6, 8, 10, 20] // 每页显示条目数量的选项
    }
  },
  methods: {
    // 搜索框搜索方法
    search () {
      // 查询和搜索框id一样的数据保留存入searchlist
      this.searchlist = this.list.filter(item => {
        return item.classroomId === parseInt(this.classid)
      })
    },
    // 跳转学生页面方法
    toStudent (row, column, event) {
      // 跳转路由，携带参数id
      console.log(row)
      this.$router.push({
        path: '/student',
        query: {
          id: row.classroomId
        }
      })
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    async getData () {
      // 返回班级学员表
      const res = await axios.get('http://127.0.0.1:8000/api/classMangement_system/classroom_members/', {
        params: {
          database: 'classroom_member'
        }
      })
      this.classlist = res.data.msg.data // 后端排好序，按照班级id排好序
      this.classlist.forEach(element => {
        // 查找某一班级的全体学生id
        this.templist = this.classlist.filter(function (item) {
          return element.classroomId === item.classroomId & item.role === '|student|'
        })
        // 存入中间值，计算人数
        const id = element.classroomId
        const count = this.templist.length + '人'
        const obj = {
          classroomId: id,
          count: count,
          describe: '所有班级'
        }
        // 如果没有存过这个班，就推入数组中保存
        if (this.list.findIndex(n => n.classroomId === id) === -1) {
          this.list.push(obj)
        }
      })
      this.pagination = this.list.slice(0, this.pageSize)
      this.totalItems = this.list.length
    },
    handleSizeChange (newSize) {
      this.pageSize = newSize
      this.fetchData() // 更新每页显示的条目数量后重新请求数据
    },
    handleCurrentChange (newPage) {
      this.currentPage = newPage
      this.fetchData() // 更新当前页数后重新请求数据
    },
    fetchData () {
      this.start = (this.currentPage - 1) * this.pageSize
      this.end = this.start + this.pageSize
      this.pagination = this.list.slice(this.start, this.end)
    }
  },
  created () {
    // 加载页面时申请数据渲染表格
    this.getData()
  }
}
</script>

<style>
  .mydiv {
    width: 100%;
  }

  .contain {
  }
</style>
